<!--
	数据分析
-->
<template>
<div class="record-data-box">
	<div id="resourceRecord" :style="{width: '100%', height: '500px'}"></div>
	<div id="chapterRecord" :style="{width: '100%', height: '500px'}"></div>
	<div id="visitRecord" :style="{width: '100%', height: '500px'}"></div>
</div>
</template>

<script>
import axios from "@/plugins/axios";
import {ElMessage} from "element-plus";
import ipconfig from "@/utils/ipconfig";
import * as echarts from 'echarts';

export default {
	name: "RecordData",
	data(){
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			/**
			 * 资源下载次数
			 */
			resourceDownloadTime:[],
		}
	},
	methods:{
		drawLine(x,y){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('resourceRecord'))
			// 绘制图表
			myChart.setOption({
				title: { text: '资源下载次数' },
				tooltip: {},
				xAxis: {
					data: x
				},
				yAxis: {},
				series: [{
					name: '次数',
					type: 'bar',
					data: y,
					showBackground: true,
				}],
				dataZoom: [{
					type: 'slider',
					show: true,
					start: 0,
					end: 100,
					handleSize: 8
				},
				],
			});
		},
		drawChapterRecordLine(x,y){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('chapterRecord'))
			// 绘制图表
			myChart.setOption({
				title: { text: '章节学习次数' },
				tooltip: {},
				xAxis: {
					data: x
				},
				yAxis: {},
				series: [{
					name: '次数',
					type: 'bar',
					data: y,
					showBackground: true,
				}],
				dataZoom: [{
					type: 'slider',
					show: true,
					start: 0,
					end: 100,
					handleSize: 8
				},
				],
			});
		},
		drawVisitRecordLine(x,y){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('visitRecord'))
			// 绘制图表
			myChart.setOption({
				title: { text: '课程访问次数' },
				tooltip: {},
				xAxis: {
					data: x
				},
				yAxis: {},
				series: [{
					name: '次数',
					type: 'bar',
					data: y,
					showBackground: true,
				}],
				dataZoom: [{
					type: 'slider',
					show: true,
					start: 0,
					end: 100,
					handleSize: 8
				},
				],
			});
		},
	},
	mounted() {
		// 获取资源下载次数
		axios.get(ipconfig.address+"/record/data/"
			+this.teacherInfoData.thisEditCourse.id).then((response)=>{
			if(response.data.code==200){
				// 画 资源下载次数----------------------------start
				this.resourceDownloadTime=response.data.data;
				let x=[];
				let y=[];
				this.resourceDownloadTime.forEach(item=>{
					x.push(item.resourceName);
					y.push(item.download);
				})
				this.drawLine(x,y);
				// 画 资源下载次数----------------------------end
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
		// 章节学习次数
		axios.get(ipconfig.address+"/record/chapter/"
			+this.teacherInfoData.thisEditCourse.id).then((response)=>{
			if(response.data.code==200){
				// 画 章节学习次数----------------------------start
				let x=[];
				let y=[];
				response.data.data.forEach(item=>{
					x.push(item.catalogueText);
					y.push(item.download);
				})
				this.drawChapterRecordLine(x,y);
				// 画 章节学习次数----------------------------end
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
		// 学生访问次数
		axios.get(ipconfig.address+"/record/visitTime/"
			+this.teacherInfoData.thisEditCourse.id).then((response)=>{
			if(response.data.code==200){
				// 画 学生访问次数----------------------------start
				let x=[];
				let y=[];
				response.data.data.forEach(item=>{
					x.push(item.name);
					y.push(item.visitTime);
				})
				this.drawVisitRecordLine(x,y);
				// 画 学生访问次数----------------------------end
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
	}
}
</script>

<style lang="scss" scoped>
.record-data-box{
	width: 100%;
	background: #ffffff;
}
</style>